<template>
    <div>
        <div class="comts_tit" :class="{'comt_fix':comScroll}">
            <ul>
                <li :class="{hot:indexTab=='0'}" @click="tabSwitch('0')">
                    <span>全部评论</span>{{allNum||0}}
                </li>
                <li :class="{hot:indexTab=='1'}" @click="tabSwitch('1')">
                    <span>给券的评论</span>{{couponNum||0}}
                </li>
                <li :class="{hot:indexTab=='2'}" @click="tabSwitch('2')">
                    <span>给商家的评论</span>{{shopNum||0}}
                </li>
            </ul>
        </div>
        <div :class="noInfo?'comt_list bgt':'comt_list'"
             v-infinite-scroll="moreList"
             infinite-scroll-disabled="loading"
             infinite-scroll-immediate-check = "true"
             infinite-scroll-distance="100">
            <ul :class="{'comts_mg':comScroll}">
                <li v-for="item in commentList">
                    <div class="comter_avatar"><img :src="useCommentInfo.usrPicUrl"></div>
                    <div class="comt_info">
                        <div class="comt_tit">
                            <span class="comt_date">{{item.commentCrtTime|strDate}}</span>
                            <span class="comt_name_fb">{{useCommentInfo.usrName}}</span>
                        </div>
                        <div class="comt_coupon" v-if="item.couponName" @click="lookMore(item)">
                            <!-- <div class="comt_coupon_img"><img src="../../images/commont_coupon.png"></div> -->
                            <div class="couponDiv" :class="{'coupon_yellow':item.couponType=='cash','coupon_green':item.couponType=='rebate','coupon_blue':item.couponType=='voucher','coupon_orange':item.couponType=='present','coupon_purple':item.couponType=='ticket'}">
                                <div class="_num" :class="{'coupon_color_y':item.couponType=='cash','coupon_color_g':item.couponType=='rebate','coupon_color_b':item.couponType=='voucher','coupon_color_o':item.couponType=='present','coupon_color_p':item.couponType=='ticket'}">Coupon</div>
                                <div class="_num_price">
                                    <coupon-num :num="item.denomination" :type="item.couponType"></coupon-num>
                                </div>
                                <div class="coupon_type">{{item.couponType | couponTp}}</div>
                            </div>
                            <div class="comt_coupon_info">
                                <p class="comt_coupon_info_tit">{{item.couponName}}</p>
                                <p class="comt_center"><span><img v-if="item.promAppro=='buy'" style="width: 1rem;height:1rem"  src="../../images/cashIcon.png"/></span>已出售 {{item.couponSoldnum}} <span class="pad_l">已使用 {{item.couponUsednum}}</span></p>
                                <p class="comt_bottom"><span class="red1">{{item.valuation}} </span>芸券</p>
                            </div>
                        </div>
                        <div class="comt_coupon" v-if="item.mchtName" @click="lookMore(item)">
                            <div class="comt_coupon_img"><img :src="item.mchtLogUrl"></div>
                            <div class="comt_coupon_info">
                                <p class="comt_coupon_info_tit">
                                    <span class="right color_red">￥{{item.mchtPer}}/人</span>
                                    <span class="comt_mcht_name">{{item.mchtName}}</span>
                                </p>
                                <p class="comt_center"><span>{{item.mchtTypeValue}}</span> <span class="right">{{item.mchtArea}}</span></p>
                                <!--<span class="right">天山 1.1km-->
                            </div>
                        </div>
                        <div class="comt_text">
                            <p @click="lookMore(item)">{{item.commentDsc|comdeCode}}</p>
                            <div class="comt_img clearfix">
                                <span v-for="imgItem in item.picUrl" @click="previewImage(imgItem,item.picUrl)"><img :src="imgItem"/></span>
                            </div>
                        </div>
                        <div class="comt_btn">
                            <!-- <span class="comt_btn_p">
                                <svg class="icon" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dianzan"></use>
                                </svg>点赞</span> -->
                            <!-- <span @click="lookMore(item)">
                                <svg class="icon" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pinglun1"></use>
                                </svg>评论</span> -->
                        </div>
                        <!-- <div class="praise_list">
                            <i class="icon iconfont icon-dianzan"></i><a href="#">糖炒栗子</a>，<a href="#">券享用户10**10</a>，<a href="#">券享用户14**32</a>
                        </div> -->
                        <!-- 回复评论 -->
                        <div v-if="item.dsc!=undefined" class="reply_list" @click="lookMore(item)">
                            <i class="icon iconfont icon-pinglun left"></i>
                            <div class="reply_cont limit">
                                <div class="reply_item" v-for="replyItem in item.dsc">
                                    <div class="reply_person">
                                        <span>{{replyItem.usrName}}</span>回复<span v-if="replyItem.replyUsrName!=replyItem.usrName">{{replyItem.replyUsrName}}</span><span class="right">{{replyItem.crtTime | endTime}}</span>
                                    </div>
                                    <p>{{replyItem.dsc|comdeCode}}</p>
                                </div>

                            </div>
                            <div v-if="item.dsc&&item.dsc.length>=3" class="reply_look">
                                <a @click="lookMore(item)" >查看更多</a>
                                <!-- <span v-if="replyStyle==0">|</span>
                                <a @click="jumpShop(item)" v-if="replyStyle==0">查看关于商家评论</a> -->
                            </div>
                        </div>

                    </div>
                </li>

            </ul>
            <no-data v-if="noInfo"></no-data>
        </div>
        <go-top v-show="goTopState" ref="goTopId"></go-top>
        <div class="loading-box" v-show="!noInfo" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="!noInfo&&commentList.length>2">没有更多</div>
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import {mapState} from 'vuex'
    import listLoading from '../../componentes/global/listLoading.vue'
    import couponNum from '../../componentes/global/couponNum.vue'
    export default {
        data(){
            return{
                loading:true,
                noMoreCoupon:true,
                indexTab:'0',
                couponNum:'0',
                shopNum:'0',
                allNum:'0',
                noInfo:false,
                useCommentInfo:{},
                goTopState:false,
                comScroll:false,
                moreInfo:true
            }
        },
        name:"comts",
        components:{
                listLoading,
                couponNum
        },
        beforeRouteLeave(to, from, next){
            // 避免返回时未清除定时器
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
            next()
        },
        created(){
            // 监视滚动
            window.addEventListener('scroll', this.handleScroll);
                this.$store.commit(types.MY_COMMENTS);//初始化列表
                this.$store.commit(types.MY_COMMENTS_PAGE,1);//初始化分页
                this.$store.commit(types.GET_SCORLL_STATUS,true);
                this.clickMoreList();

        },
        computed:{
            ...mapState({
                commentList:state => state.center.commentList,
                    comment:state => state.center.comment,
                    commentsPageLimit:state => state.center.commentsPageLimit
            })
        },
        methods:{
            clickMoreList:function(){
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                let me = this;
                this.noMoreCoupon = false;
                this.$store.dispatch('getMyComments',{method:'post',data:{"type":me.indexTab}}).then(function(rep){
                    if(rep.content.usrPicId){
                        // console.log(me.useCommentInfo)
                        me.useCommentInfo.usrName=rep.content.usrName;
                        me.useCommentInfo.usrPicUrl=rep.content.usrPicUrl;

                    }
                    me.couponNum=rep.content.couponComCount;
                    me.shopNum=rep.content.mchtComCount;
                    me.allNum=rep.content.couponComCount+rep.content.mchtComCount;
                    // console.log(me.noInfo)
                    if (me.indexTab==0) {
                        if(me.allNum<=0){
                            me.noInfo=true;
                        }else{
                            me.noInfo=false;
                        }
                    }else if(me.indexTab==1){
                        if(me.couponNum<=0){
                            me.noInfo=true
                        }else{
                            me.noInfo=false
                        }
                    }else if(me.indexTab==2){
                        if(me.shopNum<=0){
                            me.noInfo=true
                        }else{
                            me.noInfo=false
                        }
                    }
                    // if(!rep.content.usrCommentList){
                    //     me.noInfo=true;
                    // }else{
                    //     me.noInfo=false;

                    // }
                    // 判断有无更多数据显示隐藏加载更多
                    // if (rep.content) {
                    //     me.moreInfo=false;
                    //     // me.noInfo=true;
                    // }else{
                    //     me.moreInfo=true;
                    //     // me.noInfo=false;
                    // }
                    if(rep.content.usrCommentList){
                        me.noInfo=false;
                        if(rep.content.usrCommentList.length < me.commentsPageLimit){
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                            me.moreInfo=false;
                        }
                        if(rep.content.usrCommentList.length == me.commentsPageLimit){//如果列表数据够10条，开启下拉加载
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = true;
                        }
                    }else{
                        me.noInfo=true;
                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();

            },
            tabSwitch:function(num){
                this.$store.commit(types.MY_COMMENTS);//初始化列表
                this.$store.commit(types.MY_COMMENTS_PAGE,1);//初始化分页
                this.indexTab = num;
                this.noMoreCoupon = true;
                this.moreInfo = true;
                this.clickMoreList();
            },
            // 查看更多
            lookMore:function(params){
                let me = this;
                console.log(params.commId)
                // console.log(me.mchtId)
                // this.$router.push({'name':'commentDetail',params:{commId:params.commId,replyStyle:0}});
                if (params.couponName) {
                    this.$router.push({'name':'commentDetail',query:{commId:params.commId,usrId:params.usrId,replyStyle:0}});
                }else if(params.mchtName){
                    this.$router.push({'name':'commentDetail',query:{commId:params.commId,mchtId:params.mchtId,replyStyle:1}});
                }

            },
            previewImage:function(id,items){
                let me = this;
                wx.previewImage({
                    current: id, // 当前显示图片的http链接
                    urls: items // 需要预览的图片http链接列表
                });
            },
            //监听滚动事件
            handleScroll() {
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollHeight=document.documentElement.clientHeight||document.body.clientHeight;
                // console.log(scrollHeight)
                // 判断返回顶部的显示
                if (scrollTop>=scrollHeight+50) {
                    this.goTopState = true
                } else {
                    this.goTopState = false
                }
                //回到顶部过程中用户滚动滚动条，停止定时器
                if (scrollTop <= 0) {
                    if (this.$refs.goTopId) {
                        this.$refs.goTopId.clear();
                    }
                };
                //头部固定到顶部
                if (scrollTop > 40) {
                    this.comScroll=true;
                }else{
                    this.comScroll=false;
                }

            },
        }
    }
</script>
<style>
    .comt_img{margin:0 -0.4rem;}
    .comt_img span{float: left;width: 33.3%;height:6.5rem;margin: 0.4rem 0;padding:0 0.4rem;box-sizing: border-box;display: flex;overflow: hidden;align-items: center;align-content: center;}
    .comt_img span img{width: 100%;}
    .bgt{background-color: transparent;}
    .comt_fix{
        width: 100%;
        position: fixed;
        left:0;
        top:0;
        z-index: 99;
    }
    .comts_mg{ margin-top:6rem;}
</style>
